<template>
  <div>
    <template  v-for="item in menuData">
      <div :key="item.url">
        <template v-if="item.son">
          <el-submenu
            :index="item.url"
            :key="item.url"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.permissions_name }}</span>
            </template>
            <recursive-menu :menu-data="item.son"></recursive-menu>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item
            :index="item.url"
            :key="item.url"
          >
            <i :class="item.icon"></i>
            <span>{{ item.permissions_name }}</span>
          </el-menu-item>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: "RecursiveMenu",
  props: {
    menuData: {
      type: Array,
      required: true,
    },
  },
};
</script>

// 在上述代码中menuData 是通过组件的 props 属性传递进来的。
// 如果菜单项包含子菜单，那么该组件将再次递归地调用自身，并将子菜单数据作为参数传递给新的 RecursiveMenu 组件。

// 递归组件的实现方式类似于树形结构的递归遍历。每个子节点将被作为参数传递给递归组件本身，
// 并在递归结束时返回结果，直到所有节点都被遍历完毕